<template>
  <div class="wrapper">
    <div class="search">
       <div
         class="iconfont search__back"
         @click="handleBackClick"
         >&#xe60c;</div>
       <div class="search__content">
           <span class="iconfont search__content__icon">&#xe612;</span>
           <input class="search__content__input" placeholder="请输入商品名称" />
       </div>
    </div>
    <ShopInfo :item="item" v-show="item.imgUrl" />
    <Content />
    <Cart />
  </div>
</template>

<script>
import { reactive, toRefs } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import ShopInfo from '@/components/ShopInfo'
import Cart from './Cart'
import Content from './Content'
import { shopDetail } from "@/api/http"

const useShopInfoEffect = ()=>{
    const route = useRoute()
    const data = reactive({item:{}})
    const getItemData = async ()=>{
         const res = await shopDetail(route.params.id)
         data.item = res
    }
    const { item } = toRefs(data)
    return { item, getItemData }
}

const useBackRouterEffect = ()=>{
   const router = useRouter()
   const handleBackClick = ()=>{
       router.back()
   }
   return { handleBackClick }

}

export default {
  name: 'Shop',
  components:{ ShopInfo, Content, Cart },
  setup() {
     const { item, getItemData } = useShopInfoEffect()
     const { handleBackClick } = useBackRouterEffect()
     getItemData()   
     return { handleBackClick, item }
  }
}
</script>

<style lang="scss" scoped>
@import '../../style/viriables.scss';
.wrapper {
  padding: 0 .18rem;
}
.search{
  display: flex;
  margin: .14rem 0 0.04rem 0;
  &__back{
    width: .3rem;
    line-height: .32rem;
    font-size: .24rem;
    color: $search-bgColor;
  }
  &__content {
    display: flex;
    flex: 1;
    background: $input-bgColor;
    border-radius: .16rem;
    &__icon{
      width: .44rem;
      line-height: .32rem;
      text-align: center;
      color: $search-bgColor;
    }
    &__input{
      flex: 1;
      padding-right: .2rem;
      width: 100%;
      height: .32rem;
      border:none;
      outline: none;
      color: #333;
      font-size: .14rem;
      background: none;
    }
  }
}
</style>
